<!--
 * @description  : 移送变价案件追溯查询列表卡片组件
 * @descriptionDetail: 移送变价案件追溯查询列表卡片组件
 * @copyright    : 河北烟草
 * @author       : gys
 * @create       : 2024-06-19 08:30:00
-->

<template>
  <view class="page" style="padding-bottom:0">
    <view class="invent-content" @tap="itemClick">
      <view class="invent-right">
        <view class="title-sty" style="align-items: center;padding-top: 10rpx;">
          <view v-show="index < 3" class="tags" v-for="(item, index) in itemInfo.psCode" :key="index">
            <u-image style="vertical-align: middle;display:inline-block;" src="/static/store/store-home.png" width="48"
              height="48" />
            <span>{{ item }}</span>
          </view>
        </view>
        <view class="r-content">
          <view class="lt-right-title-label">
            <span class="lt-right-title-label">
              案件编号： {{ itemInfo.caseCode }}
            </span>
            <span class="box-item-sub-title-color home-imge" @tap.stop="showQr(itemInfo.docId)">
              <u-image src="/zmzy/static/store/erweima.png" width="41" height="45" />
            </span>
          </view>
        </view>
        <view class="peo-sty">
          <view>
            <span class="name">案发时间：</span>
            <span class="val">{{ itemInfo.caseDate }}</span>
          </view>
        </view>
        <!-- <view class="peo-sty">
          <view>
            <span class="name">处罚日期：</span>
            <span class="val">{{ itemInfo.punishDecideDate }}</span>
          </view>
        </view> -->
        <view class="peo-sty">
          <view>
            <span class="name">当事人：</span>
            <span class="val">{{ itemInfo.party }}</span>
          </view>
        </view>
        <view class="peo-sty">
          <view>
            <span class="name">案由：</span>
            <span class="val">{{ itemInfo.caseOfAction }}</span>
          </view>
        </view>
        <view class="peo-sty">
          <view>
            <span class="name">承办部门：</span>
            <span class="val">{{ itemInfo.orgName }}</span>
          </view>
        </view>
        <view class="peo-sty">
          <view>
            <span class="name">承办人：</span>
            <span class="val">{{ itemInfo.undertaker }}</span>
          </view>
        </view>
        <!-- <view class="peo-sty">
          <view>
            <span class="name">仓库名称：</span>
            <span class="val">{{ itemInfo.storeName }}</span>
          </view>
        </view>
        <view class="peo-sty">
          <view>
            <span class="name">品规数：</span>
            <span class="val">{{ itemInfo.specNum }}</span>
          </view>
        </view>
        <view class="peo-sty">
          <view>
            <span class="name">总数量：</span>
            <span class="val">{{ itemInfo.totalQty }}</span>
          </view>
        </view> -->
        <view class="peo-sty" style="flex-direction: row-reverse;">
          <view class="tagstyle" @tap.stop="downloadImg(itemInfo.docId, itemInfo.caseCode)">打印追溯码
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="qrcodeShow" mode="bottom" @close="qrcodeShow = false">
      <view class="qrcodeContainer">
        <!-- <view style="margin-top: 25px;">
          <text style="font-size: 20px; font-weight: 600;">案件编号：{{ itemInfo.caseCode }} </text>
        </view> -->
        <img :src="qrcodeImg" alt="暂无图片" style="margin-bottom: 20px;"/>
        <u-button class="u-btn" size="medium" type="primary" @tap="changeImgFormat(qrcodeImg, itemInfo.caseCode)">
          打印追溯码
        </u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import storeService from '@/service/store/store.service.js';
export default {
  props: {
    itemInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      curItemInfo: null,
      qrcodeImg: null, // 二维码图片
      qrcodeShow: false,  // 二维码弹窗控制
    };
  },
  methods: {
    itemClick() {
      this.setRouteParam(this.itemInfo);
      this.$u.route("pages/store/handover/handoverDetail");
    },
    // 显示二维码弹窗
    showQr(docId) {
      // 请求二维码
      storeService.getHandoverCaseQr({ docId: docId }).then(res => {
        if (res.success) {
          this.$modal.hideLoading();
          this.qrcodeImg = "data:image/png;base64," + res.bean;
          this.qrcodeShow = true;
        } else {
          this.$modal.hideLoading();
          console.log(res)
        }
      }).catch(err => {
        this.$modal.hideLoading();
        console.log(err)
      });
    },
    // 直接下载二维码
    downloadImg(docId, caseCode) {
      let that = this;
      // 请求二维码
      storeService.getHandoverCaseQr({ docId: docId }).then(res => {
        if (res.success) {
          this.$modal.hideLoading();
          let qrcodeImg = "data:image/png;base64," + res.bean;
          that.changeImgFormat(qrcodeImg, caseCode);
        } else {
          this.$modal.hideLoading();
          console.log(res)
        }
      }).catch(err => {
        this.$modal.hideLoading();
        console.log(err)
      });
    },
    // 图片下载格式转换 base64->.png
    changeImgFormat(objimg, caseCode) {
      // let objimg = qrcodeImg;
      let byteCharacters = atob(objimg.split(',')[1])
      let byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      let byteArray = new Uint8Array(byteNumbers)
      let blobs = 'image/png';
      let url = window.URL.createObjectURL(
        new Blob([byteArray], { type: blobs })
      );
      let link = document.createElement("a"); //创建a标签
      link.style.display = "none"; //将a标签隐藏
      link.href = url; //给a标签添加下载链接
      link.setAttribute("download", '追溯码-' + caseCode);
      document.body.appendChild(link);
      link.click(); //执行a标签
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../inventoryManage/inven_common.scss";

.page {
  padding: 0;
}

.content {
  background-color: #F3F4F5;
  min-height: 100%;
}

.list-item-root {
  margin: 10px;
  border-radius: 15px;
  overflow: hidden;
}

.invent-content {
  // padding: 24rpx;
  padding-top: 0;
}

.title-sty {
  padding-bottom: 12rpx;

  .tags {
    display: inline-block;
    width: 150rpx;
    height: 60rpx;
    text-align: center;
    line-height: 56rpx;
    background: #ECF6FF;
    border-radius: 16rpx;
    margin-right: 20rpx;
  }

  span {
    color: #0070D2;
    font-size: 22rpx;
  }
}

.home-imge {
  display: flex;
  align-items: center;

  .u-image {
    padding-right: 16rpx;
  }

}

.lt-right-title-label {
  font-size: 30rpx;
  font-weight: 600;
  color: #0070D2;
  background: #ECF6FF;
  border-radius: 4px;
  line-height: 34px;
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.peo-sty {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  font-size: 26rpx;

  .name {
    color: #999999;
    font-size: 26rpx;
    display: inline-block;
    width: 140rpx;
  }

  .val {
    color: #666666;
  }
}

.pad-top {
  padding-top: 14rpx;
}

.qrcodeContainer {
  text-align: center;

  img {
    width: 95%;
  }

  p {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
}

.tagstyle {
  color: #0070D2;
  font-weight: 600;
  text-align: right
}
</style>